<template>
    <div class="job-jd-page">
        <div class="setting-page-right-title">
            <div class="setting-right-name">
                <div class="setting-top-name">职位PA</div>
                <div class="setting-bottom-line"></div>
            </div>
        </div>
        <div class="job-jd-page-content">
            <!--必须和优先-->
            <div class="jd-information">
                <div v-for="(c,cIndex) in cls">
                    <job-title :number="cIndex===0?1:''" :title="c"></job-title>
                    <div class="infromation-sub sub-text">请选择该职位{{clsTips[cIndex]}}的要求，并设置要求</div>
                    <div style="padding-left: 30px;display: flex;flex-direction: column">
                        <div v-if="reqSelect[cIndex].length" class="bright-tag">
                            <el-tag
                                    closable
                                    v-for="(item, index) in reqSelect[cIndex]"
                                    :key="index"
                                    @close="clickDelete(cIndex,item)"
                            >{{item}}
                            </el-tag>
                        </div>
                        <el-checkbox-group v-model="reqSelect[cIndex]">
                            <el-checkbox
                                    v-for="(item, index) in reqs"
                                    :key="index"
                                    :label="item"
                                    :value="item"
                                    border
                            ></el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <el-form label-width="125px" label-position="right">
                        <el-form-item v-for="(col,index) in reqSelect[cIndex]" :key="index" :label="col+'：'">
                            <el-select v-if="col!==reqs[0]" class="main-w291" v-model="must_first[cIndex][col]"
                                       placeholder="请选择" value="">
                                <el-option
                                        v-for="(option,optionIndex) in serverOptions[reqsOptions[col]]"
                                        :key="optionIndex"
                                        :label="option.content"
                                        :value="option.id"
                                ></el-option>
                            </el-select>
                            <el-cascader
                                    v-if="col===reqs[0]"
                                    class="main-w291"
                                    :options="licenseOptions"
                                    v-model="must_first[cIndex][col]"
                                    @change="handleChange"
                            >
                            </el-cascader>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!--其他要求-->
            <div class="jd-information">
                <job-title number="2" title="其他"></job-title>
                <div class="infromation-sub sub-text">请输入该职位其他要求</div>
                <el-form label-width="130px" label-position="right">
                    <el-form-item label="其他要求：">
                        <el-input
                                type="textarea"
                                v-model="otherReq[0]"
                                class="theme-input long-textarea"
                                placeholder="不超过500字"
                                maxlength="500"
                                rows="5"
                                show-word-limit
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <!--薪酬福利-->
            <div class="jd-information">
                <job-title number="3" title="薪酬福利"></job-title>
                <div class="infromation-sub sub-text">请输入该职位其他要求</div>
                <el-form label-width="130px" label-position="right">
                    <el-form-item v-for="(col,index) in bonus" :key="index" :label="col+'：'">
                        <el-input class="theme-input main-w291" :placeholder="bonusPlaceHolder[index]"
                                  v-model="bonusValue[index]"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <!--发布-->
            <div class="jd-period">
                <el-form label-width="130px" label-position="right">
                    <el-form-item>
                        <el-button @click="clickPublish">发布</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
  import jobTitle from './job-title'
  import * as _ from 'underscore'
  import _g from '../../assets/utils/global'
  import china from '../../assets/utils/china'

  export default {
    name: 'PA',
    components: {
      jobTitle
    },
    computed: {
      licenseOptions() {
        return _.map(this.serverOptions[13], t => {
          return {
            value: t.id,
            label: t.content,
            children: _.map(t.srList, o => {
              return {
                value: o.id,
                label: o.content
              }
            })
          }
        })
      }
    },
    props: {
      cls: {
        type: Array,
        default: function() {
          return ['必须', '优先']
        }
      },
      clsTips: {
        type: Array,
        default: function() {
          return ['必须达到', '优先考虑']
        }
      },
      reqs: {
        type: Array,
        default: function() {
          return ['执业类型', '工作年限', '学历要求', '学院要求', '稳定性', '年龄要求', '性别要求']
        }
      },
      reqsOptions: {
        type: Object,
        default: function() {
          //以中文作为键值
          let temp = {}
          let typeIds = [13, 37, 34, 43, 42, 40, 41]
          for (let i = 0; i < this.reqs.length; i++) {
            temp[this.reqs[i]] = typeIds[i]
          }
          return temp
        }
      },
      reqSelect: {
        type: Array,
        default: function() {
          return [[], []]
        }
      },
      bonus: {
        type: Array,
        default: function() {
          return ['薪资构成', '社保福利', '假期福利', '交通福利']
        }
      },
      bonusValue: {
        type: Array,
        default: function() {
          return ['', '', '', '']
        }
      },
      bonusPlaceHolder: {
        type: Array,
        default: function() {
          return ['例如：底薪+奖金、提成、股份、无', '例如：五险一金、六险一金、无', '例如：国家法定节假日、带薪年假、无', '例如：交通补贴、实报实销、无']
        }
      },
      must_first: {
        type: Array,
        default: function() {
          let res = []
          for (let i = 0; i < this.cls.length; i++) {
            let temp = {}
            for (let o of this.reqs) {
              temp[o] = null
            }
            res.push(temp)
          }
          console.log(res)
          return res
        }
      },
      otherReq: {
        type: Array,
        default: function() {
          return ['']
        }
      }
    },
    data() {
      return {
        serverOptions: {},
        chinaOptions: china.chinaOptions
      }
    },
    methods: {
      handleChange(v) {
        console.log('pa license', v)
      },
      clickDelete: function(index, col) {
        //更新选择
        let exist = -1
        for (let i = 0; i < this.reqSelect[index].length; i++) {
          console.log(this.reqSelect[index][i])
          console.log(col)
          if (this.reqSelect[index][i] === col) {
            exist = i
            break
          }
        }
        console.log(exist)
        if (exist > -1) {
          this.reqSelect[index].splice(exist, 1)
        }
      },

      clickPublish: function() {
        let temp = [{}, {}]
        for (let c = 0; c < this.cls.length; c++) {
          for (let col of this.reqSelect[c]) {
            if (col === '执业类型') {
              temp[c][col] = this.must_first[c][col][1]
            } else {
              temp[c][col] = this.must_first[c][col]
            }
          }
        }
        this.$emit('click-publish', temp, this.otherReq[0], this.bonusValue)
      },
      loadOptions() {
        let state = _.unique(_.values(this.reqsOptions)).join(',')
        console.log(state)
        _g.apiPost('/company/selectStaticData.do', { state: state })
          .then(res => {
            if (!_.isNull(res) && res.status === 0) {
              this.serverOptions = res.data
            }
          })
      }
    },
    created() {
      this.loadOptions()
    }
  }
</script>

<style scoped>

    p {
        margin: 0
    }

    .pa-root {
        width: 980px;

        margin-bottom: 97px;

        background: white;

        /*border: 1px red solid;*/

        position: relative;

    }

    .pa-brow {
        width: 980px;
        height: 50px;
        background: rgba(251, 251, 255, 1);
        display: flex;
        align-items: center;

        position: relative;
    }

    .brow_title {
        font-size: 19px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 26px;
    }

    .brow_active {
        width: 50px;
        height: 3px;
        background: rgba(255, 115, 0, 1);

        position: absolute;
        bottom: 0;
    }

    .brow_tab_cls {

        height: 100%;

        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        left: 57px;
    }

    .brow_tip_cls {
        font-size: 14px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 20px;

        position: absolute;
        left: 142px;
    }

    .num_s {
        font-size: 30px;
        font-weight: 400;
        color: rgba(255, 115, 0, 1);
        line-height: 42px;
    }

    .num_1 {
        position: absolute;
        left: 87px;
        top: 86px;
    }

    .num_2 {
        position: absolute;
        left: 81px;
        top: 1020px;
    }

    .num_3 {
        position: absolute;
        left: 81px;
        top: 1300px;
    }

    .title_s {
        font-size: 19px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 26px;
    }

    .sub_title_s {
        font-size: 14px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 20px;

        margin-top: 5px;
    }


    .must {
        display: flex;
        flex-direction: column;

        margin-top: 43px;

    }

    .delete_s {
        display: flex;
        flex-direction: row;

        margin-top: 10px;
    }

    .cha_cha_cls {
        width: 8px;
        height: 8px;
        background: black;
    }

    .delete_item_s {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        width: 84px;
        height: 26px;
        background: rgba(243, 243, 247, 1);
        border-radius: 2px;

        font-size: 13px;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 18px;

        margin-right: 10px;

    }

    .title_g_s {
        display: flex;
        align-items: center;
    }

    .req_s {

        width: 400px;

        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;

        margin-top: 19px;

    }

    .req_item_s {
        width: 84px;
        height: 26px;
        border-radius: 2px;
        border: 1px solid rgba(75, 139, 249, 1);
    }

    .req_text_s {
        font-size: 14px;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 20px;
    }

    .select_g_s {
        display: flex;
        flex-direction: column;

        margin-top: 20px;
    }

    .select_item_s {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .select_text_s {
        font-size: 14px;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 20px;
    }

    .select_input_s {
        width: 291px;
        height: 33px;
    }

    .req_selected_s {

        width: 11px;
        height: 12px;
        background: black;

        position: absolute;
        right: 0;
        bottom: 0;
    }

    .pa_content_cls {
        width: 980px;
        display: flex;
        flex-direction: column;

        padding-left: 111px;
        padding-bottom: 43px;

        /*border: 1px black solid;*/
    }

    .pa_splitter {
        width: 810px;
        height: 1px;
        border: 1px solid rgba(238, 238, 238, 1);

        margin-top: 30px;
        margin-bottom: 38px;
    }

    .other_input_s {
        width: 449px;
        height: 139px;

        margin-top: 20px;
    }

    .input {
        font-size: 15px;
        font-weight: 400;
        color: rgba(204, 204, 204, 1);
        line-height: 21px;
    }

    .bonus_input_s {
        width: 291px;
        height: 33px;
    }

    .publish {
        width: 145px;
        height: 60px;

        padding-bottom: 55px;

        margin-left: 191px;
    }
</style>